<!DOCTYPE html>
<html lang="eng"> 
    <head>
	<meta charset="UTF-8">
	<title>Bus Planner</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet"
	href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css"
	/>
	<link rel="styleshett" href="css/busplanner.css" />

	<script type="text/javascript"
	    src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
	<script
	    src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script
	    src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
	<!-- script type="text/javascript" src="js/places.js"></script
	-->
	<script type="text/javascript" src="js/bp.js"></script> 
    </head>
    <body>
	<div data-role="page" id="main" style="width:100%;
	height:100%;">
	    <div data-role="header" data-position="fixed"> 
		<h3>Bus Planner</h3> 
		<a href="#main"> <div 
		style="width:30px;height:28px;position:relative;
		border: 1px solid #b8b8b8;"> <img
		src="/images/logo30x28.png" alt="bp logo"
		style="position:absolute;top: 50%; left: 50%;
		margin-left: -16px; margin-top: -18px" /> </div>
		</a>
		<a data-role="button" href="#settings" data-icon="gear" 
		class="ui-btn-right"></a>
	    </div>
	    <!-- Content -->
	    <div data-role="content" style="width:100%; height:800px;padding:0">
		<!-- Map -->
		<div id="map_canvas" style="position:absolute;width:100%;
		height:800px;"></div><!-- Map End -->
	    </div><!-- Content End -->
	</div>
	<!-- Settings -->
	<div data-role="page" data-add-back-btn="true" id="settings">
	    <div data-role="header">
		<h2>Settings</h2>
	    </div>
	    <div data-role="content">
		<div data-role="fieldcontain">
		    <label for="latitude">Latitude</label>
		    <input type="text" name="latitude" id="latitude"
		    data-mini="true" />
		</div> 
		<div data-role="fieldcontain"> 
		    <label for="longitude">Longitude</label>
		    <input type="text" name="longitude" id="longitude"
		    data-mini="true" />
		</div>
		<div data-role="fieldcontain">
		    <label for="select-state">State</label> 
		    <select name="select-state" id="select-state" 
		    data-mini="true"></select>
		</div>
		<div data-role="fieldcontain"> 
		    <label for="select-municipality">Municipality</label>
		    <select name="select-municipality"
			id="select-municipality" data-mini="true">
		    </select>
		</div> 
		<div data-role="fieldcontain">
		    <input type="button" id="save-settings" value="Save"
		    data-mini="true" /> 
		</div> 
	    </div> 
	</div><!-- Settings end --> 
	<script type="text/javascript"> 
	    $(document).ready(function() { 
		    p = new CurrentLocation(); 
		    initialize(p); 
	    }); 
	</script> 
    </body>
</html>
